import Vue from 'vue'
import {getBanner,getBannerAns} from "@/api/banner";
import {VCarousel,VCarouselItem} from 'vuetify/lib'

interface IData {
    img: Array<any>
}
export default Vue.extend({
    name: 'Swiper',
    data: (): IData => ({
        img: []
    }),
    components: {
        'v-carousel': VCarousel,
        'v-carousel-item': VCarouselItem
    },
    mounted() {
        getBanner()
            .then(res => {
                const {code,msg,data} = res as unknown as getBannerAns
                if(code === 200){
                    this.img = data
                }else {
                    console.log(msg)
                }
            })
    },
    render(){
        return(
            <v-carousel show-arrows={false} height={''} cycle={true} interval={2500} hide-delimiter-background={true} delimiter-icon="mdi-minus">
                {
                    this.img?.map(item => {
                        return (
                            <v-carousel-item
                                key={item.bid}
                                src={item.bImg}
                                style={{width: '100vw'}}>
                            </v-carousel-item>
                        )
                    })
                }
            </v-carousel>
        )
    }
})